<script>
import { reactive, toRefs } from "vue";

import Table from "./components/Table.vue";
export default {
  components: { Table },
  setup() {
    const state = reactive({
      tableLabel: [
        "出入口标识ID",
        "出入口名称",
        "出入口-平面位置-X",
        "出入口-平面位置-Y",
        "出入口备注",
      ],
      tableData: [
        {
          出入口标识ID: "122",
          出入口名称: "A1",
          "出入口-平面位置-X": "23",
          "出入口-平面位置-Y": "43",
          出入口备注: "无",
        },
        {
          出入口标识ID: "122",
          出入口名称: "A1",
          "出入口-平面位置-X": "23",
          "出入口-平面位置-Y": "43",
          出入口备注: "无",
        },
        {
          出入口标识ID: "122",
          出入口名称: "A1",
          "出入口-平面位置-X": "23",
          "出入口-平面位置-Y": "43",
          出入口备注: "无",
        },
        {
          出入口标识ID: "122",
          出入口名称: "A1",
          "出入口-平面位置-X": "23",
          "出入口-平面位置-Y": "43",
          出入口备注: "无",
        },
      ],
    });

    return { ...toRefs(state) };
  },
};
</script>


<template>
  <div class="card-container">
    <el-card shadow="never"> 模型 </el-card>

    <el-card shadow="never" style="margin-top: 20px">
      <Table :tableLabel="tableLabel" :tableData="tableData" />
    </el-card>
  </div>
</template>

<style scoped>
.card-container {
  padding: 20px;
}
</style>